<template>
    <div class="menuTree">
        <!-- <div class="experience_inputs"> -->
            <div class="operate_inputs">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="菜单名称：" >
                        <el-input v-model="formInline.title" class="divided_150 nowrapInput"></el-input>
                    </el-form-item>
                     <el-form-item label="Router：" label-width="50px">
                        <el-input v-model="formInline.router" class="divided_150 nowrapInput"></el-input>
                    </el-form-item>
                    <el-form-item label="Icon：" label-width="50px">
                        <el-input v-model="formInline.extrasets" class="divided_150 nowrapInput"></el-input>
                    </el-form-item>
                    <el-form-item label="type：" label-width="50px">
                        <el-select v-model="formInline.type" class="divided_150 nowrapInput">
                            <el-option label='模块' value="1"></el-option>
                            <el-option label='页面' value="2"></el-option>
                            <el-option label='操作' value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属菜单分类：" placeholder="一级菜单">
                        <el-select @change='getType' v-model="formInline.pid1" class="divided_200 nowrapInput">
                            <el-option @click='gt(menu.type)' v-for="(menu,i) in subnodeList" :key='i' :label='menu.title' :value="menu.id"></el-option>
                        </el-select>
                        <el-select @change='getType2' v-if='su2show' v-model="formInline.pid2" class="divided_200 nowrapInput">
                            <el-option v-for="(menu2,j) in subnodeList2" :key='j' :label='menu2.title' :value="menu2.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="search_btn s_now" type="primary" @click="addNode">
                            <i class="el-icon-search"></i>添加
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        <!-- </div> -->
        <el-table
            v-loading="loading2"
            element-loading-text="加载中..."
            :data="experienceData"
            v-if='experienceData'
            stripe 
            size="mini"
            border resizable
            style="width: 100%"
            :height="tableHeight">
            <el-table-column
                label="ID"
                prop="id"
                :align="align">
            </el-table-column>
            <el-table-column
                label="菜单名称"
                prop="title"
                :align="align">
            </el-table-column>
            <el-table-column
                label="Router"
                prop="router"
                :align="align">
            </el-table-column> 
            <el-table-column
                label="排序"
                prop="sortnum"
                :align="align">
            </el-table-column> 
                      
            <el-table-column 
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        class="divided_4"
                        @click="editNode(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 编辑 -->
        <el-dialog title="编辑" 
            :modal=false
            width='beforeAddwidth'
            :close-on-click-modal=false
            :visible.sync="dialogFormVisible1">
            <el-form>
                <el-form-item label="菜单名称：" :label-width="formLabelWidth">
                    <el-input v-model="nodeContain.title" class="divided_200"></el-input>
                </el-form-item>
                <el-form-item label="Router：" :label-width="formLabelWidth">
                    <el-input v-model="nodeContain.router" class="divided_200"></el-input>
                </el-form-item>
                <el-form-item label="父级ID：" :label-width="formLabelWidth">
                    <el-input v-model="nodeContain.pid" class="divided_200"></el-input>
                </el-form-item>
                <el-form-item label="排序：" :label-width="formLabelWidth">
                    <el-input v-model="nodeContain.sortnum" class="divided_200"></el-input>
                </el-form-item>
                <el-form-item label="附件参数：" :label-width="formLabelWidth">
                    <el-input v-model="nodeContain.params" class="divided_200"></el-input>
                </el-form-item>   
                 <el-form-item label="是否隐藏：" :label-width="formLabelWidth">
                    <el-radio-group  v-model="isHidden">
                        <el-radio label=1>是</el-radio>
                        <el-radio label=0>否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible1=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="confirmEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import base from '../api/base.js'
    export default {
        data() {
            return {
                tableHeight:window.innerHeight-300,
                loading2:true,
                formLabelWidth: '160px',
                formInline:{
                    title:'',
                    router:'',
                    sortnum:'',
                    pid:0,
                    pid1:'',
                    pid2:'',
                    type:'',
                    extrasets:''
                },
                subnodeList:'',//菜单分类
                subnodeList2:'',
                beforeAddwidth:'60%',
                columWidth:300,
                align:'center',
                // 体验班管理表格
                experienceData: [],
                dialogFormVisible1:false,
                nodepid:'',
                nodeContain:'',//指定节点信息
                isHidden:0,
                su2show:false
            }
        },
        methods: {
            addNode() {
                this.$axios({
                    url: base.baseUrl+"/school/setting/add-node",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        title:this.formInline.title,
                        router:this.formInline.router,
                        sortnum:this.formInline.sortnum,
                        pid:this.formInline.pid,
                        type:this.formInline.type,
                        extrasets:this.formInline.extrasets
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                    if(res.data.code==200){
                        this.getSubnode()
                        this.getData()
                        this.formInline.title=this.formInline.router=this.formInline.sortnum=this.formInline.pid=this.formInline.type=this.formInline.extrasets=''
                    }
                });
            },
            // 一级
            getSubnode(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/get-subnode",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        nodeid:0
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.subnodeList=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            getType(e){
                this.formInline.pid=e
                this.getSubnode2()
            },
            // 联动
            getSubnode2(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/get-subnode",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        nodeid:this.formInline.pid
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.data!=null){
                        this.subnodeList2=res.data.data;
                        this.su2show=true
                    }else{
                        this.su2show=false
                    } 
                });
            },
            getType2(e2){
                this.formInline.pid=e2
            },
            getData(){
                 this.$axios({
                    url: base.baseUrl+"/school/setting/get-node-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        needall:1
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.experienceData=res.data.data;
                        this.loading2=false
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            // 编辑节点
            editNode(id){
                this.dialogFormVisible1=true
                this.nodeid=id    
                this.getNodeInfo()
            },
            getNodeInfo(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/get-node-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        nodeid:this.nodeid
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.nodeContain=res.data.data
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            confirmEdit(){
                 this.$axios({
                    url: base.baseUrl+"/school/setting/edit-node",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        nodeid:this.nodeid,
                        router:this.nodeContain.router,
                        title:this.nodeContain.title,
                        pid:this.nodeContain.pid,
                        type:this.nodeContain.type,
                        prams:this.nodeContain.params,
                        sortnum:this.nodeContain.sortnum,
                        hidden:this.isHidden
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.alertTip('编辑成功')
                        this.dialogFormVisible1=false
                        this.getData()
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            }
        },
        created(){
            this.getSubnode()
            this.getData()
        }
    }
</script>
<style lang="less" scoped>
    @media screen and (max-width:1700px){
        .el-form--inline{
            width: 1400px;
        }  
    }
    @media screen and (max-width:1440px){
        // .el-form--inline{
        //     // background: #ff5263;
        //     width: 1000px;
        // }  
        .nowrapInput{
            width: 88px!important;
        }
    }
    .s_now{
        width:60px!important;
        padding: 0;
    }
    // .experience_inputs{
        // height: 60px;
        // box-sizing: border-box;
        // background: #f5f5f5;
        // padding-top: 10px;
        // display: flex;
        .creatBtn{
            width: 240px;
            cursor: pointer;
        }
        .operate_inputs{
            padding: 15px 30px;
            // height: 70px;
            box-sizing: border-box;
            button{
                width: 130px;
                height: 38px;
                border-radius: 4px;
                border: none;
            }
            .search_btn{       
                background-color: #ff5263;
            }
            .reset_btn{
                background-color: #808080;
            }
        }
    // }
</style>

